<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>按钮</title>
    <script src="老师的jquery-2.0.3%20(1).js"></script>
    <style>
        *{
            box-sizing:border-box;
        }
        button{
            display:block;
            width:150px;
            height:60px;
            margin:50px auto;
            font-size:30px;
            border:2px solid black;
        }
        button:hover{
            width:200px;
            height:80px;
            background:orangered;
            opacity:0.9;
        }
        .yincang{
            width:100%;
            height:960px;
            display:none;
            background-image: url(222.jpg);
            background-repeat:no-repeat;
            background-size:100% 960px;
        }
        .a{
            height:200px;
        }
        .a img{
            position:absolute;
            top:20%;
            right:-10%;
        }
        .b{
            position:absolute;
            top:50%;
            left:35%;
            width:200px;
            height:200px;
            background-size:200px 200px;
        }

        @keyframes name{
            from{
                right:0%;
            }
            to{
                right:100%;
            }
        }
        @keyframes huantu {
            25% {
                background-image: url(5.jpg);
            }
            50% {
                background-image: url(6.jpg);
            }
            75% {
                background-image: url(7.jpg);
            }
            100% {
                background-image: url(8.gif);
            }
        }
    </style>
</head>
<body>

<div class="container">
    <button>点击</button>
    <div class="yincang">
        <div class="a">
            <img src="1.jpg">
        </div>
        <div class="b">

        </div>
    </div>
</div>

</body>
</html>
<script>
    $(function(){

        $('button').click(function(){
            $('button').css('display','none');
            $('.yincang').css('display','block');
            $('.yincang .a img').css('animation-name','name').css('animation-duration','10s').css('animation-iteration-count','6');
            $('.yincang .b').css('animation-name','huantu').css('animation-duration','10s').css('animation-iteration-count','6');
        });

    })

</script>